<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情">
    </el-page-header>
    <div class="orderInfoDetail" v-if="orderBaseInfo && orderBaseInfo.length">
      <div class="editButtonGroup">
        <el-row>
          <el-button type="primary" round @click="editKfRemark()">客服备注</el-button>
          <el-button type="primary" v-if="'ORDER_PAYED'==orderBaseInfo[0].orderStatus || 'ORDER_CONFIRM'==orderBaseInfo[0].orderStatus"
            round plain @click="edit('receiverInfo')">修改收货人信息</el-button>
          <el-button v-if="cActive === 1" type="primary" round @click="edit('orderPrice')">修改价格</el-button>
          <el-button v-if="cActive === 2 && (!(orderBaseInfo[0].shippingTime))" type="primary" round plain @click="edit('fastShipping')">快捷发货</el-button>
        </el-row>
      </div>
      <el-steps :active="cActive" align-center>
        <el-step title="提交订单" :description="exchangeTime(orderBaseInfo[0].createTime)" :icon="cActive >= 1 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step title="支付订单" :description="exchangeTime(orderBaseInfo[0].payTime)" :icon="cActive >= 2 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step v-if="!orderBaseInfo[0].refundBeginTime" title="平台发货" :description="exchangeTime(orderBaseInfo[0].shippingTime)" :icon="cActive >= 3 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step v-if="!orderBaseInfo[0].refundBeginTime" title="确认收货" :description="exchangeTime(orderBaseInfo[0].shippingConfirmTime)" :icon="cActive >= 4 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step v-if="!orderBaseInfo[0].refundBeginTime" title="完成评价" :description="exchangeTime(orderBaseInfo[0].evaluateTime)" :icon="cActive >= 5 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step v-if="orderBaseInfo[0].refundBeginTime" title="退款中" :description="exchangeTime(orderBaseInfo[0].refundBeginTime)" :icon="cActive >= 6 ? 'el-icon-success' : 'el-icon-time'"></el-step>
        <el-step v-if="orderBaseInfo[0].refundEndTime" title="退款成功" :description="exchangeTime(orderBaseInfo[0].refundEndTime)" :icon="cActive === 7 ? 'el-icon-success' : 'el-icon-time'"></el-step>
      </el-steps>
      <div>
        <collapse-list>
          <collapse-item show title="基本信息">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="orderBaseInfo"
              :header="orderBaseInfoTableHeader" :option="tableOption">
              <el-table-column slot="fixed" align="center" label="操作" width="100" class-name="fixed-width">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.orderSn && scope.row.invoiceNo" @click="toLogisticsDetail(scope.row)" class="btn-operation" type="text"
                    size="small">查看物流</el-button>
                  <!-- <br v-if="scope.row.orderSn && scope.row.invoiceNo">
                  <el-button v-if="scope.row.orderSn && scope.row.invoiceNo" @click="edit('updateShipping', scope.row)" class="btn-operation" type="text"
                    size="small">修改物流信息</el-button> -->
                </template>
              </el-table-column>
            </draggable-table>
          </collapse-item>
          <collapse-item show title="门店信息">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="orderBaseInfo"
              :header="supplierInfoTableHeader" :option="tableOption">
            </draggable-table>
          </collapse-item>
          <collapse-item show title="收货人信息">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="orderBaseInfo"
              :header="consigneeInfoHeader" :option="tableOption">
            </draggable-table>
          </collapse-item>
          <collapse-item show title="商品信息">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="goodsBaseInfo"
              :header="goodsBaseInfoTableHeader" :option="tableOption">
              <el-table-column slot="fixed" align="center" label="操作" width="100" class-name="fixed-width">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.goodsId" :disabled="(scope.row.cost > 0)" @click="edit('dealPrice', scope.row)"
                    class="btn-operation" type="text" size="small">修改结算价</el-button>
                </template>
              </el-table-column>
            </draggable-table>
          </collapse-item>
          <collapse-item show title="费用信息">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="orderBaseInfo"
              :header="costInfoHeader" :option="tableOption">
            </draggable-table>
          </collapse-item>
          <collapse-item show title="操作记录">
            <draggable-table class="hn-appointment-add-table" :loading="false" :hasOperationBtn="false" :data="dealInfo"
              :header="dealInfoHeader" :option="tableOption">
            </draggable-table>
          </collapse-item>
        </collapse-list>
      </div>
    </div>
    <el-dialog @open="onOpen" @close="onClose" title="修改收货人信息" :visible.sync="editReceiverInfoMask">
      <el-form ref="elForm" :model="receiverInfo" :rules="receiverInfoRules" size="medium" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="receiverInfo.name" placeholder="请输入姓名" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="receiverInfo.phone" placeholder="请输入电话" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="receiverInfo.addr" placeholder="请输入地址" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm('receiverInfo')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog @open="onOpen" @close="onClose" title="修改价格" :visible.sync="editOrderPriceMask">
      <el-form ref="elForm" :model="editOrderInfo" :rules="editOrderInfoRules" size="medium" label-width="100px">
        <el-form-item label="客服改价" prop="price">
          <el-input v-model="editOrderInfo.price" placeholder="请输入价格(不能低于结算价)" type="number" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm('orderPrice')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog @open="onOpen" @close="onClose" title="快捷发货" :visible.sync="fastShippingMask" append-to-body center :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="elForm" :model="fastShippingInfo" :rules="fastShippingInfoRules" size="medium" label-width="100px">
        <el-form-item label="物流公司">
          <el-select v-model="fastShippingInfo.logisticName" placeholder="请选择物流公司">
            <el-option v-for="dict in logisticCompanies" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticNumber">
          <el-input v-model="fastShippingInfo.logisticNumber" placeholder="请输入物流单号" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="deliveryRemark">
          <el-input v-model="fastShippingInfo.deliveryRemark" placeholder="填写备注" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm('fastShipping')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog @open="onOpen" @close="onClose" title="修改物流信息" :visible.sync="updateShippingMask" append-to-body center :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="elForm" :model="fastShippingInfo" :rules="fastShippingInfoRules" size="medium" label-width="100px">
        <el-form-item label="物流公司">
          <el-select v-model="fastShippingInfo.logisticName" placeholder="请选择物流公司">
            <el-option v-for="dict in logisticCompanies" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticNumber">
          <el-input v-model="fastShippingInfo.logisticNumber" placeholder="请输入物流单号" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="deliveryRemark">
          <el-input v-model="fastShippingInfo.deliveryRemark" placeholder="填写备注" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm('updateShipping')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog @open="onOpen" @close="onClose" title="修改结算价格" :visible.sync="editDealPriceMask">
      <el-form ref="elForm" :model="editDealPriceInfo" :rules="editDealPriceRules" size="medium" label-width="100px">
        <el-form-item label="价格" prop="price">
          <el-input v-model="editDealPriceInfo.price" placeholder="请输入价格" clearable :style="{width: '100%'}" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm('dealPrice')">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改客服备注" :visible.sync="kFRemarkDialog.isShow">
      <el-form ref="elForm" :model="kFRemarkDialog" :rules="kFRemarkDialog.rule" size="medium" label-width="100px">
        <el-form-item label="客服备注" prop="value">
          <el-input v-model="kFRemarkDialog.value" placeholder="请输入备注信息" clearable :style="{width: '100%'}" type="text"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="kFRemarkDialog.isShow=false">取消</el-button>
        <el-button type="primary" @click="handelConfirmKfRemark('dealPrice')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as orderInfoService from "@/api/orderInfo/orderInfo"
  import collapseList from '@/components/Collapse'
  import collapseItem from '@/components/Collapse/collapseItem'
  import draggableTable from '@/components/DraggableTable'

  export default {
    name: "orderInfoDetail",
    components: {},
    components: {
      collapseList,
      collapseItem,
      draggableTable
    },
    data() {
      return {
        cActive: 1,
        orderStatusLists: [],
        dealInfo: [],
        goodsBaseInfo: [],
        orderBaseInfo: [],
        logisticCompanies: [], // 物流公司列表
        tableOption: {
          border: true,
          minHeight: 400,
          hideInput: true,
          tableHeader: 'lightblue',
          tableClassName: 'hn-form-custom-table'
        },
        orderStatusName: "",
        orderBaseInfoTableHeader: [{
          prop: 'orderSn',
          label: '订单编号'
        }, {
          prop: 'nickName',
          label: '用户账号'
        }, {
          prop: 'payName',
          label: '支付方式',
          width: 100
        }, {
          prop: 'orderStatusName',
          label: '订单状态',
          width: 100
        }, {
          prop: 'invoiceNo',
          label: '物流单号'
        }, {
          prop: 'remark',
          label: '备注信息'
        }, {
          prop: 'kfRemark',
          label: '客服备注'
        }],
        supplierInfoTableHeader: [{
          prop: 'supplierName',
          label: '门店'
        }, {
          prop: 'guideName',
          label: '服务导购'
        }],
        consigneeInfoHeader: [{
          prop: 'consignee',
          label: '姓名'
        }, {
          prop: 'mobile',
          label: '电话'
        }, {
          prop: 'address',
          label: '地址'
        }],
        goodsBaseInfoTableHeader: [{
          prop: 'goodsImg',
          label: '图片',
          width: '120',
          render: (h, params) => {
            const product = params.row
            console.log('product:')
            console.log(product)
            console.log(product.goodsImg)
            if (product.goodsImg) {
              return h('div', {
                attrs: {
                  class: 'my-goods-img'
                },
                domProps: {
                  innerHTML: ('<img src="' + product.goodsImg + '"/>')
                }
              })
            } else {
              return <span > < /span>
            }
          }
        }, {
          prop: 'goodsName',
          label: '名称'
        }, {
          prop: 'goodsAttr',
          label: '属性'
        }, {
          prop: 'cost',
          label: '结算价'
        }, {
          prop: '',
          label: '第三方ID'
        }, {
          prop: 'price',
          label: '售价'
        }, {
          prop: 'goodsNumber',
          label: '数量'
        }, {
          prop: 'goodsTotalPrice',
          label: '小计'
        }],
        costInfoHeader: [{
          prop: 'goodsAmount',
          label: '商品总价'
        }, {
          prop: '',
          label: '优惠券'
        }, {
          prop: 'totalFee',
          label: '订单总价'
        }, {
          prop: 'adminDiscount',
          label: '客服改价'
        }, {
          prop: 'moneyPaid',
          label: '付款金额'
        }, {
          prop: 'cost',
          label: '结算价'
        }, {
          prop: 'commission',
          label: '佣金'
        }],
        dealInfoHeader: [{
          prop: 'actionUser',
          label: '操作者'
        }, {
          prop: 'createTime',
          label: '操作时间'
        }, {
          prop: 'orderStatus',
          label: '订单状态'
        }, {
          prop: '',
          label: '收款状态'
        }, {
          prop: 'actionNote',
          label: '操作内容'
        }],

        receiverInfo: {
          name: undefined,
          phone: undefined,
          addr: undefined
        },
        fastShippingInfo: {
          logisticName: undefined,
          logisticNumber: undefined,
          deliveryRemark: undefined
        },
        editOrderInfo: {
          price: undefined,
        },
        receiverInfoRules: {
          name: [{
            message: '请输入姓名',
            trigger: 'blur'
          }],
          phone: [{
            message: '请输入正确的号码',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value && !((/^\d{12}$/).test(value) ||
                  (/^\d{11}$/).test(value) ||
                  (/^\d{8}$/).test(value) ||
                  (/^\d{7}$/).test(value))) {
                callback(new Error('7、8、11、12位的手机号或座机号'))
              } else {
                callback()
              }
            }
          }],
          addr: [{
            message: '请输入地址',
            trigger: 'blur'
          }]
        },
        editOrderInfoRules: {
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }]
        },
        editDealPriceRules: {
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }]
        },
        fastShippingInfoRules: {
          logisticName: [{
            required: true,
            message: '请输入物流公司',
            trigger: 'blur'
          }],
          logisticNumber: [{
            required: true,
            message: '请输入物流 单号',
            trigger: 'blur'
          }]
        },
        editDealPriceInfo: {
          price: undefined
        },
        editReceiverInfoMask: false,
        editOrderPriceMask: false,
        fastShippingMask: false,
        updateShippingMask: false,
        editDealPriceMask: false,
        loading: false,
        id: this.$route.params.id,
        currentProduct: {},
        kFRemarkDialog:{
          isShow: false,
          value: '',
          rule: {},
        }
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      exchangeTime(timeStr) {
        let str = '';
        if (timeStr && timeStr.length > 0) {
          Date.prototype.Format = function(fmt) {
            var o = {
              'M+': this.getMonth() + 1, // 月份
              'd+': this.getDate(), // 日
              'h+': this.getHours(), // 小时
              'm+': this.getMinutes(), // 分
              's+': this.getSeconds(), // 秒
              'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
              'S': this.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
            for (var k in o)
              if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) :
                (('00' + o[k]).substr(('' + o[k]).length)));
            return fmt;
          };
          str = new Date(timeStr).Format('yyyy-MM-dd hh:mm:ss');
        }
        return str
      },
      toLogisticsDetail(row) {
        console.log('查看物流row:')
        console.log(row)
        this.$router.push({
          name: 'logisticDetail',
          params: {
            invoiceNo: row.invoiceNo,
            expressName: row.expressName
          }
        })
      },
      onOpen() {},
      onClose() {
        this.editReceiverInfoMask = false
        this.fastShippingMask = false
        this.updateShippingMask = false
        this.fastShippingInfo.logisticName = ''
        this.fastShippingInfo.logisticNumber = ''
        this.fastShippingInfo.deliveryRemark = ''
        this.editDealPriceMask = false
        this.editOrderPriceMask = false
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.editReceiverInfoMask = false
        this.fastShippingMask = false
        this.updateShippingMask = false
        this.fastShippingInfo.logisticName = ''
        this.fastShippingInfo.logisticNumber = ''
        this.fastShippingInfo.deliveryRemark = ''
        this.editDealPriceMask = false
        this.editOrderPriceMask = false
      },
      handelConfirm(type) {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          if (type === 'receiverInfo') {
            this.saveReceiverInfo()
          } else if (type === 'orderPrice') {
            this.saveOrderPrice()
          } else if (type === 'fastShipping') {
            this.saveShippingInfo()
          } else if (type === 'updateShipping') {
            this.updateShippingInfo()
          } else if (type === 'dealPrice') {
            this.saveDealPrice()
          }
        })
      },
      handelConfirmKfRemark(){
        let params = {
          id: this.id,
          kfRemark: this.kFRemarkDialog.value
        }
        orderInfoService.updateOrderInfo(params).then((res) => {
          if (res && res.code && res.code === 200) {
            this.$message.success('修改客服备注成功')
            this.kFRemarkDialog.isShow = false
            this.getDetail()
          } else {
            let msg = '修改物流信息失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
        })
      },
      edit(type, row) {
        if (type === 'receiverInfo') {
          this.editReceiverInfoMask = true
        } else if (type === 'orderPrice') {
          this.editOrderPriceMask = true
        } else if (type === 'fastShipping') {
          console.log('查看一下row:');
          console.log(row);
          this.fastShippingInfo.logisticName = ''
          this.fastShippingInfo.logisticNumber = ''
          this.fastShippingInfo.deliveryRemark = ''
          this.fastShippingMask = true
        } else if (type === 'updateShipping') {
          console.log('查看一下row2:');
          console.log(row);
          this.fastShippingInfo.logisticName = row.expressName || '';
          this.fastShippingInfo.logisticNumber = row.invoiceNo || '';
          this.fastShippingInfo.deliveryRemark = row.remark || '';
          this.updateShippingMask = true
        } else if (type === 'dealPrice') {
          this.editDealPriceMask = true
          this.currentProduct = row
        }
      },
      editKfRemark(){
        this.kFRemarkDialog.value = this.orderBaseInfo[0].kfRemark
        this.kFRemarkDialog.isShow = true
      },
      saveDealPrice() {
        console.log(this.currentProduct)
        this.$webGlobal.startLoading()
        const data = {
          'id': this.currentProduct.id,
          'cost': this.editDealPriceInfo.price,
        }
        orderInfoService.updateCost(data).then((res) => {
          if (res && res.code && res.code === 200) {
            this.$message.success('修改结算价成功')
            this.getDetail()
            this.getGoodsDetail()
          } else {
            let msg = '修改物结算价失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('修改结算价失败！')
        })
        this.editDealPriceMask = false
      },
      saveShippingInfo() {
        this.$webGlobal.startLoading()
        const data = {
          'id': this.id,
          'invoiceNo': this.fastShippingInfo.logisticNumber,
          'expressName': this.fastShippingInfo.logisticName
        }
        if (this.fastShippingInfo.deliveryRemark) {
          data.deliveryRemark = this.fastShippingInfo.deliveryRemark
        }
        orderInfoService.updateFastDelivery(data).then((res) => {
          if (res && res.code && res.code === 200) {
            this.$message.success('发货成功')
            this.getDetail()
            this.getGoodsDetail()
          } else {
            let msg = '发货失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('发货失败！')
        })
        this.fastShippingMask = false
      },
      updateShippingInfo() {
        this.$webGlobal.startLoading()
        const data = {
          'id': this.id,
          'invoiceNo': this.fastShippingInfo.logisticNumber,
          'expressName': this.fastShippingInfo.logisticName
        }
        if (this.fastShippingInfo.deliveryRemark) {
          data.deliveryRemark = this.fastShippingInfo.deliveryRemark
          data.remark = this.fastShippingInfo.deliveryRemark
        }
        orderInfoService.updateOrderInfo(data).then((res) => {
          if (res && res.code && res.code === 200) {
            this.fastShippingInfo.logisticName = undefined;
            this.fastShippingInfo.logisticNumber = undefined;
            this.fastShippingInfo.deliveryRemark = undefined;
            this.$message.success('修改物流信息成功')
            this.getDetail()
            this.getGoodsDetail()
          } else {
            let msg = '修改物流信息失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('修改物流信息失败！')
        })
        this.fastShippingInfo.logisticName = undefined
        this.fastShippingInfo.logisticNumber = undefined
        this.fastShippingInfo.deliveryRemark = undefined
        this.updateShippingMask = false
      },
      saveOrderPrice() {
        this.$webGlobal.startLoading()
        const data = {
          'id': this.id,
          'adminDiscount': this.editOrderInfo.price
        }
        orderInfoService.updateOrderPrice(data).then((res) => {
          if (res && res.code && res.code === 200) {
            this.$message.success('修改价格成功')
            this.getDetail()
            this.getGoodsDetail()
          } else {
            let msg = '修改价格失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('修改价格失败！')
        })
        this.editOrderPriceMask = false
      },
      saveReceiverInfo() {
        this.$webGlobal.startLoading()
        const data = {
          'id': this.id
        }
        if (this.receiverInfo.phone) {
          data.mobile = this.receiverInfo.phone
        }
        if (this.receiverInfo.name) {
          data.consignee = this.receiverInfo.name
        }
        if (this.receiverInfo.addr) {
          data.address = this.receiverInfo.addr
        }
        orderInfoService.updateOrderInfo(data).then((res) => {
          if (res && res.code && res.code === 200) {
            this.$message.success('修改收货人信息成功')
            this.getDetail()
            this.getGoodsDetail()
          } else {
            let msg = '修改收货人信息失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('修改收货人信息失败！')
        })
        this.editReceiverInfoMask = false
      },
      getDetail() {
        this.$webGlobal.startLoading()
        orderInfoService.getOrderInfo(this.id).then((res) => {
          if (res && res.code && res.code === 200) {
            if (res.data) {
              const arr = []
              arr.push(res.data)
              console.log('佣金详情:')
              console.log(arr)
              const row = arr[0]
              if (row.orderStatus === 'ORDER_CONFIRM') {
                this.cActive = 1
              } else if (row.orderStatus === 'ORDER_PAYED') {
                this.cActive = 2
              } else if (row.orderStatus === 'ORDER_SHIPPINGED') {
                this.cActive = 3
              } else if (row.orderStatus === 'ORDER_SHIPPING_CONFIRM') {
                this.cActive = 4
              } else if (row.orderStatus === 'ORDER_FINISH') {
                this.cActive = 5
              } else if (row.orderStatus === 'ORDER_REFUND') {
                this.cActive = 6
              } else if (row.orderStatus === 'ORDER_REFUND_END') {
                this.cActive = 7
              } else {
                console.log('当前状态:' + row.orderStatus)
              }
              console.log('当前状态:' + row.orderStatus)
              console.log(this.cActive)
              this.orderBaseInfo = arr
            }
            this.orderStatusList()
          } else {
            let msg = '获取详情失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('获取详情失败！')
        })
      },
      getGoodsDetail() {
        this.$webGlobal.startLoading()
        orderInfoService.getGoodsInfo(this.id).then((res) => {
          if (res && res.code && res.code === 200) {
            if (res.rows) {
              this.goodsBaseInfo = res.rows
            }
          } else {
            let msg = '获取商品信息失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('获取商品信息失败！')
        })
      },
      getOpretionList() {
        this.$webGlobal.startLoading()
        orderInfoService.getOpretionList(this.id).then((res) => {
          if (res && res.code && res.code === 200) {
            if (res.rows) {
              this.dealInfo = res.rows
            }
          } else {
            let msg = '获取操作记录失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('获取操作记录失败！')
        })
      },
      orderStatusList() {
        this.$webGlobal.startLoading()
        orderInfoService.orderStatusList().then((res) => {
          if (res && res.code && res.code === 200) {
            if (res.data && res.data.length) {
              this.orderStatusLists = res.data;
              let currentOrderStatusName = ''
              res.data.forEach((item, index) => {
                if (item.dictValue === this.orderBaseInfo[0].orderStatus) {
                  currentOrderStatusName = item.dictLabel
                }
              })
              this.$set(this.orderBaseInfo[0], 'orderStatusName', currentOrderStatusName)
            }
          } else {
            let msg = '获取订单状态枚举失败！'
            if (res.msg) {
              msg = res.msg
            }
            this.$message.error(msg)
          }
          this.$webGlobal.endLoading()
        }).catch((res) => {
          this.$webGlobal.endLoading()
          this.$message.error('获取订单状态枚举失败1！')
        })
      },
      goBack() {
        this.$router.go(-1)
      }
    },
    created() {
      this.getDetail()
      this.getGoodsDetail()
      this.getOpretionList()
      this.getDicts("LOGISTICS_COMPANIES").then(response => {
        this.logisticCompanies = response.data;
        console.log('物流公司列表:');
        console.log(this.logisticCompanies);
      });
      // this.orderStatusList()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .orderInfoDetail {
    font-size: 14px;
    padding: 20px;
    padding-top: 0;

    .editButtonGroup {
      margin: 0px 0 20px 0;
      text-align: right;
    }

    .el-steps--horizontal {
      margin-bottom: 20px;
    }
  }

  .my-goods-img {
    width: 100%;
  }

  .my-goods-img img {
    width: 100%;
  }
</style>
